<template>
  <van-nav-bar
    :title="title"
    :left-text="showleft ? '返回' : ''"
    :left-arrow="showleft"
    @click-left="onClickLeft"
    class="header-box"
    v-if="!home"
  />
  <van-nav-bar
    color="rgb(253, 57, 57)"
    class="header-box"
    :right-text="rightText ? '个人中心' : '登录/注册'"
    @click-right="onClickRight"
    v-else
  >
    <div slot="title">
      <img
        v-lazy="apihost+homeLogo"
        alt
        style="height:1rem;position: absolute;top: 50%;left: 50%;transform:translate(-50%, -50%);"
      />
      <!-- <span v-show="false">{{apihost}}</span> -->
    </div>
  </van-nav-bar>
  <!-- <div class="header-box">
      <div class="left-icon">
        <span v-if="showleft" @click="back" class="icon-back"></span>
      </div>
      <div class="header-title">
        <span v-if="showinput">
          <cus-input></cus-input>
        </span>
        <span v-if="!showinput">{{title}}</span>
      </div>
      <div class="right-icon">
        <span v-if="showmore" class="icon"></span>
      </div>
  </div>-->
</template>

<script>
import { mapState } from "vuex";
import { ACCESS_TOKEN, API_HOST } from "@/store/mutation-types";
export default {
  data() {
    return {
      apihost: "",
      rightText: this.$ls.get(ACCESS_TOKEN)
    };
  },
  props: {
    home: {
      type: Boolean,
      default: false
    },
    showleft: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: "标题"
    },
    showleft: {
      type: Boolean,
      default: true
    }
  },
  watch: {
    // 监控路由属性的变化
    $route: {
      immediate: true,
      handler(to, from) {
        this.rightText = this.$ls.get(ACCESS_TOKEN);
        this.apihost = this.$ls.get(API_HOST);
        if (!this.apihost) {
          this.$store.dispatch("GET_CONF").then(res => {
            this.apihost = res.data.apihost;
          });
        }
      }
    }
  },
  computed: {
    ...mapState(["homeLogo"])
    // logo() {
    //   return this.apihost + this.homeLogo;
    // },
  },
  methods: {
    onClickRight() {
      let path = this.$ls.get(ACCESS_TOKEN) ? "/user" : "/login";
      this.$router.push({
        path: path,
        query: {
          redirect: this.$route.path
        }
      });
    },
    onClickLeft() {
      if (window.history.length > 1) {
        window.history.go(-1);
      } else {
        this.$router.push("/home");
      }
    }
  }
};
</script>

<style lang="less" scoped>
@import "~styles/index.less";
@import "~styles/variable.less";

.header-box {
  box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
}
/deep/ .van-nav-bar__left {
  font-size: 12px;
}
/deep/ .van-nav-bar__title {
  margin: 0 auto;
  font-size: 12px;
}
</style>
